<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="../../../common/common-jstl.jspf" %>
<%@ include file="../../../common/common-easyui.jspf" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试试卷</title>

</head>
<body>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei", "SimSun";
    }

    .container {
        width: 100%;
        margin: 0 auto;
        background-color: #F2F2F2;
    }

    .container .header {
        text-align: center;
        height: 100px;
        padding-top: 50px;
    }

    .content {
        margin-left: 100px;
        font-size: 14px;
    }

    .blank .bl {
        outline: none;
        border: none;
        background-color: #F2F2F2;
        border-bottom: 1px solid #A1A1A1;
        text-indent: 3px;
        width: 200px;
    }

    .subject > div > textarea {
        width: 624px;
        height: 125px;
        resize: none;
        outline: none;
    }

    .subject > div > span {
        position: relative;
        top: -108px;
    }

    .timer {
        width: 200px;
        height: 40px;
        background: rgba(0, 0, 0, .2);
        position: fixed;
        top: 120px;
        right: 60px;
        color: blue;
        line-height: 40px;
        font-family: "微软雅黑";
        text-align: center;
        font-size: 2em;
    }

    .l-btn {
        text-decoration: none;
        display: inline-block;
        overflow: hidden;
        margin: 0;
        padding: 0;
        cursor: pointer;
        outline: none;
        text-align: center;
        vertical-align: middle;
        line-height: 36px;
        height: 36px;
    }

    .l-btn-text {
        display: inline-block;
        vertical-align: top;
        width: auto;
        line-height: 36px;
        font-size: 20px;
        padding: 0;
        margin: 0 4px;
    }
</style>
<div class="container">
    <form id="frm" method="post">
        <input type="hidden" name="ruleId" value="${dto.rule.ruleId}"/>
        <input type="hidden" name="paperId" value="${dto.paper.paperId}"/>
        <div class="header">
            <h1>2016-2017度${dto.paper.paperName }试卷</h1><br/>
            <h3>考试时间:${dto.paper.examTime }分钟&nbsp;&nbsp;&nbsp;&nbsp;试卷总分:${dto.rule.totalScore }分</h3>
        </div>
        <div class="content">
            <div class="sc">
                <h3>一、单项选择题(共${dto.singleList.size() }${dto.rule.testType==1?").":"" }
                    <c:if test="${dto.rule.testType!=1 }">
                        ，每题${dto.rule.scScore/dto.rule.scNumber }分).
                    </c:if></h3>
                <c:forEach items="${dto.singleList}" var="single" varStatus="st">
                    <input type="hidden" value="${single.choiceId}" name="single">
                    <div>
                        <p>${st.count }、${single.question }
                            <c:if test="${dto.rule.testType==1 }">
                                （${single.score }分）
                            </c:if>
                        </p>
                        <p>
                            <input type="radio" name="single${single.choiceId}" id="s${single.choiceId}A"
                                   value="A"><label for="s${scId }A">A、${single.answerA }</label>
                        </p>
                        <p>
                            <input type="radio" name="single${single.choiceId}" id="s${single.choiceId}B"
                                   value="B"><label for="s${single.choiceId}B">B、${single.answerB }</label>
                        </p>
                        <p>
                            <input type="radio" name="single${single.choiceId}" id="s${single.choiceId}C"
                                   value="C"><label for="s${single.choiceId}C">C、${single.answerC }</label>
                        </p>
                        <p>
                            <input type="radio" name="single${single.choiceId}" id="s${single.choiceId}D"
                                   value="D"><label for="s${single.choiceId}D">D、${single.answerD }</label>
                        </p>
                    </div>
                    <br/>
                </c:forEach>
            </div>
            <div class="mc">
                <h3>二、多选题(共${dto.multipleList.size() }题
                    ${dto.rule.testType==1?").":"" }
                    <c:if test="${dto.rule.testType!=1 }">
                        ，每题${dto.rule.mulScore/dto.rule.mulNumber }分).
                    </c:if></h3>
                <c:forEach items="${dto.multipleList}" varStatus="st" var="multiple">
                    <input type="hidden" value="${multiple.choiceId }" name="multiple">
                    <div>
                        <p>${st.count }、${multiple.question }
                            <c:if test="${dto.rule.testType==1 }">
                                （${multiple.score }分）
                            </c:if>
                        </p>
                        <p>
                            <input type="checkbox" name="multiple${multiple.choiceId }" id="${multiple.choiceId }A"
                                   value="A"><label for="${multiple.choiceId }A">A、${multiple.answerA }</label>
                        </p>
                        <p>
                            <input type="checkbox" name="multiple${multiple.choiceId }" id="${multiple.choiceId }B"
                                   value="B"><label for="${multiple.choiceId }B">B、${multiple.answerB }</label>
                        </p>
                        <p>
                            <input type="checkbox" name="multiple${multiple.choiceId }" id="${multiple.choiceId }C"
                                   value="C"><label for="${multiple.choiceId }C">C、${multiple.answerC }</label>
                        </p>
                        <p>
                            <input type="checkbox" name="multiple${multiple.choiceId }" id="${multiple.choiceId }D"
                                   value="D"><label for="${multiple.choiceId }D">D、${multiple.answerD }</label>
                        </p>
                    </div>
                    <br/>
                </c:forEach>
            </div>
            <div class="blank">
                <h3>三、填空题(共${dto.blankList.size() }题${dto.rule.testType==1?").":"" }
                    <c:if test="${dto.rule.testType!=1 }">
                        ，每题${dto.rule.bkScore/dto.rule.bkNumber }分).
                    </c:if></h3>
                <c:forEach items="${dto.blankList}" var="blank" varStatus="st">
                    <input type="hidden" value="${blank.blankId}" name="blank">
                    <div>
                        <p>${st.count }、${blank.question }
                            <c:if test="${dto.rule.testType==1 }">
                                （${blank.score }分）
                            </c:if>&nbsp;&nbsp;&nbsp;<input class="bl" type="text" name="blank${blank.blankId }"></p>
                    </div>
                    <br/>
                </c:forEach>
            </div>
            <div class="judge">
                <h3>四、判断题(共${dto.judgeList.size() }题${dto.rule.testType==1?").":"" }
                    <c:if test="${dto.rule.testType!=1 }">
                        ，每题${dto.rule.jdScore/dto.rule.jdNumber }分).
                    </c:if></h3>
                <c:forEach items="${dto.judgeList}" var="judge" varStatus="st">
                    <input type="hidden" value="${judge.judgeId}" name="judge">
                    <div>
                        <p>${st.count }、${judge.question }
                            <c:if test="${dto.rule.testType==1 }">
                                （${judge.score }分）
                            </c:if>&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="judge${judge.judgeId }" value="1">√
                            <input type="radio" name="judge${judge.judgeId }" value="2">×
                        </p>
                    </div>
                    <br/>
                </c:forEach>

            </div>
            <div class="subject">
                <h3>五、问答题(共${dto.subjectiveList.size() }题${dto.rule.testType==1?").":"" }
                    <c:if test="${dto.rule.testType!=1 }">
                        ，每题${dto.rule.subScore/dto.rule.subNumber }分).
                    </c:if></h3>
                <c:forEach items="${dto.subjectiveList}" var="subjective" varStatus="st">
                    <input type="hidden" value="${subjective.subId}" name="subjective">
                    <div>
                        <p>${st.count }、${subjective.question }
                            <c:if test="${dto.rule.testType==1 }">
                                （${subjective.score }分）
                            </c:if></p>
                        <span>答案:</span>
                        <textarea name="subjective${subjective.subId }"></textarea>
                    </div>
                    <br/>
                </c:forEach>
            </div>
        </div>
        <div style="text-align: center;margin-bottom: 20px;">
            <a href="javascript:;" id="subFrm" onclick="submitForm('frm');" class="easyui-linkbutton">提交试卷</a>
        </div>

    </form>
</div>
<div class="timer">
</div>
<script type="text/javascript">
    var examTime = ${dto.paper.examTime };
    var time = examTime * 60;
    function timer() {
        // 计算小时
        var hour = handlerTime(Math.floor(time / 3600));
        // 计算分钟
        var minutes = handlerTime(Math.floor(time % 3600 / 60));
        // 计算秒
        var second = handlerTime(Math.floor(time % 3600 % 60));

        // 判断考试时间到自动提交试卷
        if (time == 0) {
            $("#subFrm").click();
            clearInterval(timers);
        }

        $(".timer").html(hour + ":" + minutes + ":" + second);
        time--;
    }

    function handlerTime(t) {
        var t1 = t;
        if (t < 10) {
            t1 = "0" + t;
        }

        return t1;
    }

    var timers = setInterval("timer();", 1000);

    // 提交表单
    function submitForm(id) {

        $("#" + id).form('submit', {
            url: 'examController?flag=submit_paper',
            success: function (data) {
                if (data == "ok") {
                    alert("提交成功");
                } else {
                    alert("提交失败");
                }
            }
        });
    }


</script>
</body>
</html>